Gps Kilometerzähler

Beim Start der Seite wird die Position gespeichert und zeigt dir dann die zurückgelegte Stecke an
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<div id="tripmeter"> <p> Starting Location (lat, lon):<br> <span id="startLat">???</span>°, <span id="startLon">???</span>° </p> <p> Current Location (lat, lon):<br> <span id="currentLat">???</span>°, <span id="currentLon">???</span>° </p> <p> Distance from starting location:<br> <span id="distance">0</span> km </p> </div> <style> #status { width: 50vw; min-width: 500px; margin-top: 20px; } #status h2 {margin-top: 0px;} #status p {padding-left: 20px;} [data-status="off"] ~ #status { border: 2px solid red; } [data-status="on"] ~ #status { border: 2px solid green; } </style> <header> <h1>Wake Lock Demo</h1> </header> <p>The button below changes depending on whether wake lock is active or not.</p> <button data-status="off">Turn Wake Lock ON</button> <section id="status"> <h2>Wake Lock Status</h2> <p></p> </section> <p>Wake lock will automatically release if if the tab becomes inactive.</p> <p>To re-activate the wake lock automatically when the tab becomes active again, check this box: <input type="checkbox" id="reaquire" /></p> <script> console.clear(); // status paragraph const statusElem = document.querySelector('#status p'); // toggle button const wakeButton = document.querySelector('[data-status]'); // checkbox const reaquireCheck = document.querySelector('#reaquire'); // change button and status if wakelock becomes aquired or is released const changeUI = (status = 'acquired') => { const acquired = status === 'acquired' ? true : false; wakeButton.dataset.status = acquired ? 'on' : 'off'; wakeButton.textContent = `Turn Wake Lock ${acquired ? 'OFF' : 'ON'}`; statusElem.textContent = `Wake Lock ${acquired ? 'is active!' : 'has been released.'}`; } // test support let isSupported = false; if ('wakeLock' in navigator) { isSupported = true; statusElem.textContent = 'Screen Wake Lock API supported ????'; } else { wakeButton.disabled = true; statusElem.textContent = 'Wake lock is not supported by this browser.'; } if (isSupported) { // create a reference for the wake lock let wakeLock = null; // create an async function to request a wake lock const requestWakeLock = async () => { try { wakeLock = await navigator.wakeLock.request('screen'); // change up our interface to reflect wake lock active changeUI(); // listen for our release event wakeLock.onrelease = function(ev) { console.log(ev); } wakeLock.addEventListener('release', () => { // if wake lock is released alter the button accordingly changeUI('released'); }); } catch (err) { // if wake lock request fails - usually system related, such as battery wakeButton.dataset.status = 'off'; wakeButton.textContent = 'Turn Wake Lock ON'; statusElem.textContent = `${err.name}, ${err.message}`; } } // requestWakeLock() // if we click our button wakeButton.addEventListener('click', () => { if(navigator.geolocation){ var startPos; navigator.geolocation.getCurrentPosition(function(position) { startPos = position; document.getElementById('startLat').innerHTML = startPos.coords.latitude; document.getElementById('startLon').innerHTML = startPos.coords.longitude; navigator.geolocation.watchPosition(function(position) { document.getElementById('currentLat').innerHTML = position.coords.latitude; document.getElementById('currentLon').innerHTML = position.coords.longitude; }); navigator.geolocation.watchPosition(function(position) { // setInterval(function(){ document.getElementById('distance').innerHTML = calculateDistance(startPos.coords.latitude, startPos.coords.longitude, position.coords.latitude, position.coords.longitude); console.log(calculateDistance(startPos.coords.latitude, startPos.coords.longitude, position.coords.latitude, position.coords.longitude)); // },1000); }); function calculateDistance(lat1, lon1, lat2, lon2) { var R = 6371; // km var dLat = (lat2 - lat1).toRad(); var dLon = (lon2 - lon1).toRad(); var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d; } Number.prototype.toRad = function() { return this * Math.PI / 180; } }, function(error) { alert('Error occurred. Error code: ' + error.code); }); }else{ console.log('Geolocation wird für diese Browser / OS-Version noch nichtunterstützt.'); } // if wakelock is off request it if (wakeButton.dataset.status === 'off') { requestWakeLock() } else { // if it's on release it wakeLock.release() .then(() => { wakeLock = null; }) } }) const handleVisibilityChange = () => { if (wakeLock !== null && document.visibilityState === 'visible') { requestWakeLock(); } } reaquireCheck.addEventListener('change', () => { if (reaquireCheck.checked) { document.addEventListener('visibilitychange', handleVisibilityChange); } else { document.removeEventListener('visibilitychange', handleVisibilityChange); } }); } // isSupported </script>